<template>
  当前图案数：{{ sum }}
  <el-row :gutter="20">
    <el-col :span="4">
      基础图案：
      <el-button @click="setNode('rect')">矩形</el-button>
      <el-button @click="setNode('circular')">园</el-button>
      <el-button @click="setNode('line')">线</el-button>
      <el-button @click="loadImage">pic</el-button>

      <hr />

      当前连线类型：{{ connectModel[connectType] }}<br />
      <el-button @click="setConnectType('connectCurve')">曲线</el-button>
      <el-button @click="setConnectType('connectArrowCurveFill')">箭头曲线</el-button>

      <hr />

      自定义图案：
      <el-button @click="drawCanvas('rect')">正方形</el-button>
      <el-button @click="drawCanvas('star')">star</el-button>

      <hr />

      功能按钮：
      <el-button @click="clear">清空画布</el-button>
      <el-button @click="removeNode()">删除</el-button><br />
      缩放：<el-switch v-model="ele.zoom" /><br />
      连线：<el-switch v-model="ele.connect" /><br />
      允许拖拽<el-switch v-model="ele.drag" />

      <hr />

      组合图形:
      <el-button @click="bar">柱状图</el-button>
      <el-button @click="pie">饼图</el-button>

    </el-col>

    <el-col
      :span="16"
      id="canvasEvent"
    >
      <canvas
        id="drawingBoard"
        style="margin-top:10px;background:white;box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);"
      ></canvas>
    </el-col>
  </el-row>
  <div class="eleView">
    当前点击的图形：{{ele}}
  </div>
</template>

<script setup>
import {
  init,
  setNode,
  removeNode,
  pie,
  bar,
  clear,
  loadImage,
  drawCanvas,
} from "./common.js";
import { onMounted, ref, watchEffect } from "vue";
import { nodes } from "./node-example.js";

const width = 600;
const height = 400;
const defaultStyle = {
  lineWidth: 1,
};

let draw = null;
onMounted(() => {
  draw = init({ width, height, defaultStyle }, document.getElementById('drawingBoard'), checked);
  load();
  window.Drawing = draw;
});

const connectType = ref("connectCurve");
const connectModel = {
  connectCurve: "曲线",
  connectArrowCurveFill: "箭头曲线",
};
const ele = ref({});
const allEle = ref([]);
const textInfo = ref({}); // 当前选中的图案内的文字
const sum = ref(0);

watchEffect(() => {
  sum.value = allEle.value.length;
});

// 获取当前点击的图案信息
const checked = () => {
  const { nodes } = draw.getNodes();
  const node = draw.getNode();
  ele.value = node;
  allEle.value = nodes;
  textInfo.value = ele.value.textInfo || {};
};

const load = () => {
  nodes.forEach((node) => {
    draw.addNode(node);
  });
};
// 设置连线类型
const setConnectType = (type) => {
  draw.setNodeType();
  draw.setConnectType(type);
  connectType.value = type;
};
</script>

<style scoped>
.eleView {
  width: 60%;
  left: 20%;
  position: absolute;
}
</style>